<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>qq延迟隐藏</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            #div1{
                width:50px;
                height:50px;
                background:#f00;
                margin-right:20px;
                float: left;
            }
            #div2{
                width:300px;
                height:300px;
                background:#000;
                float:left;
                display: none;
            }
        </style>
        <script>
            window.onload = function() {
                var oDiv1 = document.getElementById("div1");
                var oDiv2 = document.getElementById("div2");
                var time = "";
                oDiv2.onmouseover = oDiv1.onmouseover = function() {
                    oDiv2.style.display = "block";
                    clearTimeout(time);
                };
                oDiv2.onmouseout = oDiv1.onmouseout = function() {
                    time = setTimeout(function() {
                        oDiv2.style.display = "none";
                    }, 2000);
                };
            };
        </script>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>
